Lomakkeiden etiketit: Syöttökenttien saavutettavuuden keskeiset vaatimukset

Lomakkeet ovat perustavanlaatuinen osa verkkoa. Yksinkertaisista yhteydenottolomakkeista monimutkaisiin verkkokaupan kassoihin, ne mahdollistavat käyttäjien vuorovaikutuksen verkkosivustojen ja sovellusten kanssa. Huonosti suunnitellut lomakkeet voivat kuitenkin luoda merkittäviä esteitä vammaisille käyttäjille. Keskeinen tekijä saavutettavien lomakkeiden luomisessa on lomake-etikettien oikea käyttö. Tämä opas tarjoaa kattavan yleiskatsauksen lomake-etikettien saavutettavuusvaatimuksista, varmistaen, että lomakkeesi ovat kaikkien käytettävissä heidän kyvyistään riippumatta.

Miksi saavutettavat lomake-etiketit ovat tärkeitä?

Saavutettavat lomake-etiketit ovat elintärkeitä useista syistä:

Käytettävyys: Selkeät ja ytimekkäät etiketit auttavat kaikkia käyttäjiä ymmärtämään kunkin syöttökentän tarkoituksen, mikä parantaa yleistä käytettävyyttä.
Saavutettavuus: Etiketit tarjoavat olennaista tietoa vammaisille käyttäjille, erityisesti niille, jotka käyttävät aputeknologioita, kuten ruudunlukijoita. Ilman kunnollisia etikettejä nämä käyttäjät eivät välttämättä pysty täyttämään lomakkeita.
WCAG-yhteensopivuus: Verkkosisällön saavutettavuusohjeet (WCAG) edellyttävät, että kaikilla lomakekomponenteilla on niihin liitetyt etiketit. Näiden ohjeiden noudattaminen varmistaa, että verkkosivustosi on saavutettava ja lainmukainen monilla lainkäyttöalueilla.
SEO: Vaikka saavutettavuus ei ole suora sijoitustekijä, saavutettavilla verkkosivustoilla on yleensä parempi käyttäjäkokemus, mikä voi epäsuorasti parantaa hakukoneoptimoinnin tuloksia.

WCAG-vaatimusten ymmärtäminen lomake-etiketeille

WCAG tarjoaa erityisiä ohjeita lomakkeiden saavutettavuuden varmistamiseksi. Tässä ovat keskeiset lomake-etiketteihin liittyvät vaatimukset:

WCAG 2.1 -menestyskriteeri 1.1.1 Ei-tekstuaalinen sisältö (Taso A)

Vaikka tämä kriteeri ei suoraan koske etikettejä, se korostaa tekstivaihtoehtojen tarjoamisen tärkeyttä kaikelle ei-tekstuaaliselle sisällölle, mukaan lukien CAPTCHA-koodit ja lomakkeissa käytetyt kuvat. Oikein nimetty lomake on ratkaisevan tärkeä kontekstin antamiseksi näille vaihtoehdoille.

WCAG 2.1 -menestyskriteeri 1.3.1 Tieto ja suhteet (Taso A)

Esitystavan välittämät tiedot, rakenne ja suhteet tulee olla ohjelmallisesti määritettävissä tai saatavilla tekstinä. Tämä tarkoittaa, että etiketin ja sitä vastaavan syöttökentän välinen suhde on määriteltävä nimenomaisesti HTML-koodissa.

WCAG 2.1 -menestyskriteeri 2.4.6 Otsikot ja etiketit (Taso AA)

Otsikot ja etiketit kuvaavat aihetta tai tarkoitusta. Lomake-etiketit tarjoavat kuvailevan kontekstin syöttökentille, mikä helpottaa käyttäjien ymmärtää lomakkeen rakennetta ja täyttää se oikein.

WCAG 2.1 -menestyskriteeri 3.3.2 Etiketit tai ohjeet (Taso A)

Etiketit tai ohjeet on annettava, kun sisältö vaatii käyttäjän syötettä.

WCAG 2.1 -menestyskriteeri 4.1.2 Nimi, rooli, arvo (Taso A)

Kaikkien käyttöliittymäkomponenttien (mukaan lukien, mutta ei rajoittuen, lomake-elementit, linkit ja skriptien luomat komponentit) nimi ja rooli on voitava määrittää ohjelmallisesti; tilat, ominaisuudet ja arvot, jotka käyttäjä voi asettaa, on voitava asettaa ohjelmallisesti; ja ilmoitukset näiden kohteiden muutoksista ovat käyttäjäagenttien, mukaan lukien aputeknologioiden, saatavilla.

Parhaat käytännöt saavutettavien lomake-etikettien toteuttamiseen

Tässä on useita parhaita käytäntöjä saavutettavien lomake-etikettien luomiseen:

1. Käytä <label>-elementtiä

<label>-elementti on ensisijainen tapa liittää tekstietiketti syöttökenttään. Se tarjoaa semanttisen ja rakenteellisen yhteyden etiketin ja komponentin välille. <label>-elementin for-attribuutin tulisi vastata vastaavan syöttökentän id-attribuuttia.

Esimerkki:


<label for="name">Nimi:</label>
<input type="text" id="name" name="name">

Väärä esimerkki (vältä tätä):


<span>Nimi:</span>
<input type="text" id="name" name="name">

span-elementin käyttäminen label-elementin sijaan ei luo tarvittavaa ohjelmallista yhteyttä, mikä tekee siitä saavuttamattoman ruudunlukijoille.

2. Yhdistä etiketit nimenomaisesti syöttökenttiin

Varmista selkeä ja nimenomainen yhteys etiketin ja syöttökentän välillä käyttämällä for- ja id-attribuutteja, kuten yllä olevassa esimerkissä näytetään.

3. Sijoita etiketit oikein

Etikettien sijoittelu voi vaikuttaa käytettävyyteen. Yleensä etiketit tulisi sijoittaa:

Syöttökentän yläpuolelle: Tämä on usein saavutettavin ja käyttäjäystävällisin vaihtoehto, erityisesti tekstikentille ja tekstialueille.
Syöttökentän vasemmalle puolelle: Yleinen, mutta voi olla vähemmän tehokas näkövammaisille käyttäjille, joilla voi olla vaikeuksia sivun selaamisessa.
Radiopainikkeille ja valintaruuduille: Etiketit tulisi sijoittaa komponentin oikealle puolelle.

Ota huomioon kulttuuriset normit etikettejä sijoitettaessa. Joissakin kielissä etiketit sijoitetaan perinteisesti syöttökentän jälkeen. Mukauta suunnitteluasi näiden mieltymysten mukaan.

4. Tarjoa selkeät ja ytimekkäät etiketit

Etikettien tulisi olla lyhyitä, kuvailevia ja helposti ymmärrettäviä. Vältä ammattijargonia tai teknisiä termejä, jotka voivat sekoittaa käyttäjiä. Esimerkiksi "UserID":n sijaan käytä "Käyttäjätunnus" tai "Sähköpostiosoite". Harkitse lokalisointia. Varmista, että etiketit on helppo kääntää eri kielille säilyttäen niiden merkityksen.

5. Käytä ARIA-attribuutteja tarvittaessa

ARIA (Accessible Rich Internet Applications) -attribuutit voivat parantaa lomake-elementtien saavutettavuutta, erityisesti monimutkaisissa tilanteissa. Käytä ARIA-attribuutteja kuitenkin harkiten ja vain silloin, kun natiivit HTML-elementit ja -attribuutit eivät riitä.

aria-label: Käytä tätä attribuuttia antaaksesi etiketin, kun näkyvä etiketti ei ole mahdollinen tai käytännöllinen.
aria-labelledby: Käytä tätä attribuuttia viitataksesi sivulla olevan olemassa olevan elementin ID:hen, joka toimii etikettinä.
aria-describedby: Käytä tätä attribuuttia antaaksesi lisätietoja tai ohjeita syöttökentälle. Tämä on hyödyllistä kontekstin antamiseen tai validointisääntöjen selittämiseen.

Esimerkki aria-labelin käytöstä:


<input type="search" aria-label="Hae sivustolta">

Esimerkki aria-labelledby:n käytöstä:


<h2 id="newsletter-title">Uutiskirjeen tilaus</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Syötä sähköpostiosoitteesi">

6. Ryhmittele toisiinsa liittyvät lomake-elementit <fieldset>- ja <legend>-elementeillä

<fieldset>-elementti ryhmittelee toisiinsa liittyviä lomakekomponentteja, ja <legend>-elementti antaa kuvatekstin fieldsetille. Tämä parantaa lomakkeen rakennetta ja helpottaa käyttäjien ymmärtää eri syöttökenttien välisiä suhteita.

Esimerkki:


<fieldset>
  <legend>Yhteystiedot</legend>
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Sähköposti:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Tarjoa selkeät virheilmoitukset

Kun käyttäjät tekevät virheitä täyttäessään lomaketta, anna selkeät ja informatiiviset virheilmoitukset, jotka selittävät, mikä meni pieleen ja miten virhe korjataan. Yhdistä nämä virheilmoitukset vastaaviin syöttökenttiin käyttämällä ARIA-attribuutteja, kuten aria-describedby.

Esimerkki:


<label for="email">Sähköposti:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Anna kelvollinen sähköpostiosoite.</span>

Varmista, että virheilmoitus on visuaalisesti erottuva (esim. käyttämällä väriä tai kuvakkeita) ja ohjelmallisesti saavutettavissa aputeknologioille.

8. Käytä riittävää värikontrastia

Varmista riittävä värikontrasti etikettitekstin ja taustavärin välillä WCAG-vaatimusten täyttämiseksi. Käytä värikontrastin analysaattorityökalua varmistaaksesi, että kontrastisuhde täyttää vähimmäisvaatimukset (4.5:1 normaalille tekstille ja 3:1 suurelle tekstille). Tämä auttaa heikkonäköisiä käyttäjiä lukemaan etiketit helpommin.

9. Varmista näppäimistön saavutettavuus

Kaikkien lomake-elementtien tulee olla saavutettavissa pelkällä näppäimistöllä. Käyttäjien tulee pystyä siirtymään lomakkeen läpi Tab-näppäimellä ja olemaan vuorovaikutuksessa lomakekomponenttien kanssa välilyönti- tai Enter-näppäimellä. Testaa lomakkeesi perusteellisesti näppäimistöllä varmistaaksesi kunnollisen näppäimistösaavutettavuuden.

10. Testaa aputeknologioilla

Paras tapa varmistaa lomakkeidesi saavutettavuus on testata niitä aputeknologioilla, kuten ruudunlukijoilla (esim. NVDA, JAWS, VoiceOver). Tämä auttaa sinua tunnistamaan mahdolliset saavutettavuusongelmat, jotka eivät ehkä ole ilmeisiä visuaalisessa tarkastelussa. Ota vammaisia käyttäjiä mukaan testausprosessiisi saadaksesi arvokasta palautetta.

Esimerkkejä saavutettavien lomake-etikettien toteutuksista

Esimerkki 1: Yksinkertainen yhteydenottolomake (kansainvälinen näkökulma)

Harkitse yhteydenottolomaketta globaalille yleisölle. Etikettien tulisi olla selkeitä, ytimekkäitä ja helposti käännettäviä.


<form>
  <label for="name">Koko nimi:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Sähköpostiosoite:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Maa:</label>
  <select id="country" name="country">
    <option value="">Valitse maa</option>
    <option value="us">Yhdysvallat</option>
    <option value="ca">Kanada</option>
    <option value="uk">Yhdistynyt kuningaskunta</option>
    <option value="de">Saksa</option>
    <option value="fr">Ranska</option>
    <option value="jp">Japani</option>
    <option value="au">Australia</option>
    <!-- Lisää maita -->
  </select><br><br>

  <label for="message">Viesti:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Lähetä">
</form>

Huomaa "Koko nimi" -termin käyttö pelkän "Nimi"-sanan sijaan selkeyden vuoksi, erityisesti kulttuureissa, joissa sukunimi tulee ennen etunimeä.

Esimerkki 2: Verkkokaupan kassalomake

Verkkokaupan kassalomakkeet vaativat usein arkaluontoisia tietoja. Selkeät etiketit ja ohjeet ovat ratkaisevan tärkeitä luottamuksen rakentamisessa ja saavutettavuuden varmistamisessa.


<form>
  <fieldset>
    <legend>Toimitusosoite</legend>
    <label for="shipping_name">Koko nimi:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Osoite:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Kaupunki:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Postinumero:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Maa:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Valitse maa</option>
      <option value="us">Yhdysvallat</option>
      <option value="ca">Kanada</option>
      <!-- Lisää maita -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Maksutiedot</legend>
    <label for="card_number">Luottokortin numero:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Voimassaoloaika (KK/VV):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="KK/VV"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Tee tilaus">
</form>

Fieldset- ja legend-elementtien käyttö järjestää lomakkeen selkeästi loogisiin osioihin. Paikkamerkkiteksti antaa lisäohjeita, mutta muista, että paikkamerkkitekstiä ei tule käyttää etikettien korvikkeena.

Esimerkki 3: Rekisteröitymislomake ARIA-attribuuteilla

Harkitse rekisteröitymislomaketta, jossa lempinimi on vapaaehtoinen. ARIA-attribuuttien avulla voimme antaa lisäkontekstia.


<form>
  <label for="username">Käyttäjätunnus:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Salasana:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Lempinimi (valinnainen):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Tämä lempinimi näytetään julkisesti.</span><br><br>

  <input type="submit" value="Rekisteröidy">
</form>

aria-describedby-attribuutti yhdistää lempinimen syöttökentän span-elementtiin, joka antaa lisätietoja siitä, miten lempinimeä käytetään.

Työkaluja lomakkeiden saavutettavuuden testaamiseen

Useat työkalut voivat auttaa sinua arvioimaan lomakkeidesi saavutettavuutta:

Accessibility Insights: Selainlaajennus, joka tunnistaa saavutettavuusongelmia verkkosivuilla.
WAVE (Web Accessibility Evaluation Tool): Verkkotyökalu, joka arvioi verkkosivujen saavutettavuusvirheitä.
axe DevTools: Selainlaajennus, joka suorittaa automaattista saavutettavuustestausta.
Ruudunlukijat (NVDA, JAWS, VoiceOver): Testaaminen ruudunlukijoilla on välttämätöntä sellaisten saavutettavuusongelmien tunnistamiseksi, jotka eivät välttämättä ole ilmeisiä automaattisessa testauksessa.

Johtopäätös

Saavutettavat lomake-etiketit ovat olennaisia osallistavien verkkokokemusten luomisessa. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit varmistaa, että lomakkeesi ovat kaikkien käytettävissä heidän kyvyistään riippumatta. Saavutettavuuden priorisointi ei hyödytä ainoastaan vammaisia käyttäjiä, vaan parantaa myös verkkosivustosi yleistä käytettävyyttä kaikille käyttäjille. Muista testata lomakkeesi johdonmukaisesti aputeknologioilla ja ottaa vammaisia käyttäjiä mukaan testausprosessiisi saadaksesi arvokasta palautetta ja parantaaksesi jatkuvasti verkkosivustosi saavutettavuutta.

Saavutettavuuden omaksuminen ei ole vain säännösten noudattamista; kyse on osallistavamman ja tasa-arvoisemman verkon luomisesta kaikille. Investoimalla saavutettavaan lomakesuunnitteluun osoitat sitoutumisesi osallisuuteen ja luot paremman käyttäjäkokemuksen kaikille.